<template>
  <div v-if="visible" class="single-tabs-container" id="tabCard" @click.stop>
    <div class="close" @click.stop="tabsVisibleClose">
      <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/closeBtn.png'" alt="" />
    </div>
    <el-tabs
      v-model="activeName"
      :class="single ? 'single-demo-tabs' : 'demo-tabs'"
    >
      <el-tab-pane v-if="isPlane" label="设备信息" name="first">
        <div v-for="droneModel in droneModelList" :key="droneModel">
          <div class="content-line">
            <span>飞机品牌</span>
            <span class="contant">
              <div class="box">{{ droneModel.brandName || "-" }}</div>
            </span>
          </div>
          <div class="content-line">
            <span>飞机型号</span>
            <span class="contant"
              ><div class="box">{{ droneModel.modelType || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>无人机SN</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.flightControlSn
                    ? `${droneModel.flightControlSn}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机ID</span>
            <span class="contant"
              ><div class="box">
                {{ droneModel.ID ? `${droneModel.ID}` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>起飞时间</span>
            <span class="contant"
              ><div class="box">
                {{ droneModel.takeoffTime ? `${droneModel.takeoffTime}` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机坐标</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.curLongitude
                    ? `${droneModel.curLongitude} ${droneModel.curLatitude}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机速度</span>
            <span class="contant"
              ><div class="box">
                {{ droneModel.curSpeed ? `${droneModel.curSpeed} 米/s` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机高度</span>
            <span class="contant"
              ><div class="box">
                {{ droneModel.curHeight ? `${droneModel.curHeight} 米` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>方向角</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.directionAngle
                    ? `${droneModel.directionAngle}°`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="divider"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-else label="设备信息 " name="first">
        <div v-for="droneModel in droneModelList" :key="droneModel">
          <div class="content-line">
            <span>无人机品牌</span>
            <span class="contant"
              ><div class="box">{{ droneModel.brandName || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>无人机型号</span>
            <span class="contant"
              ><div class="box">
                {{ droneModel.modelType || droneModel.model || "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>飞控序列号</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.flightControlSn && droneModel.deviceTypeId === "0"
                    ? `${droneModel.flightControlSn}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>电子身份证</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.electronicIdCard
                    ? `${droneModel.electronicIdCard}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>起飞时间</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.takeoffTime
                    ? `${dataFormat(droneModel.takeoffTime)}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机坐标</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.curLongitude
                    ? `${droneModel.curLongitude.toFixed(
                        8
                      )} ${droneModel.curLatitude.toFixed(8)}`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机速度</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.curSpeed
                    ? `${droneModel.curSpeed.toFixed(2)} 米/s`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机高度</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.curHeight
                    ? `${droneModel.curHeight.toFixed(2)} 米`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>预警原因</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.alarmReason
                    ? droneModel.alarmReason === 1
                      ? "超高飞行"
                      : "闯入禁飞区"
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>方向角</span>
            <span class="contant"
              ><div class="box">
                {{
                  droneModel.directionAngle
                    ? `${droneModel.directionAngle}°`
                    : "-"
                }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>视屏回传</span>
            <span class="contant"
            >
              <div class="boxVideo" @click="deviceVideo(droneModel)"></div>
            </span>
          </div>
          <div v-if="droneModelList.length > 1" class="divider"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="isFirm" label="机构信息" name="second">
        <div class="content-line">
          <span>管理员姓名</span>
          <span class="contant"
            ><div class="box">{{ firmDetail.registerName || "-" }}</div></span
          >
        </div>
        <div class="content-line">
          <span>管理员联系方式</span>
          <span class="contant"
            ><div class="box">{{ firmDetail.registerMobile || "-" }}</div></span
          >
        </div>
        <div class="content-line">
          <span>管理员证件号码</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.registerCredentialsNumber || "-" }}
            </div></span
          >
        </div>
        <div class="content-line">
          <span>机构名称</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.institutionName || "-" }}
            </div></span
          >
        </div>
        <div class="content-line">
          <span>机构类型</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.institutionType || "-" }}
            </div></span
          >
        </div>
        <div class="content-line">
          <span>统一社会信用码</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.unifiedSocialCreditCode || "-" }}
            </div></span
          >
        </div>
        <div class="content-line">
          <span>注册地址</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.registerAddress || "-" }}
            </div></span
          >
        </div>
        <div class="content-line">
          <span>法人名称</span>
          <span class="contant"
            ><div class="box">{{ firmDetail.legalName || "-" }}</div></span
          >
        </div>
        <div class="content-line">
          <span>法人证件号码</span>
          <span class="contant"
            ><div class="box">
              {{ firmDetail.legalCredentialsNumber || "-" }}
            </div>
          </span>
        </div>
        <div class="content-line">
          <span>营业执照</span>
          <span v-if="firmDetail.businessLicense" class="contant">
            <img
              style="width: 50px; height: 50px"
              :src="firmDetail.businessLicense"
            />
          </span>
          <span v-if="!firmDetail.businessLicense">-</span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="飞手信息" name="third">
        <div class="noAvailable" v-if="flyingHandList.length === 0">
          暂无数据
        </div>
        <div v-else v-for="flyingHand in flyingHandList" :key="flyingHand">
          <div class="content-line">
            <span>飞手姓名</span>
            <span class="contant"
              ><div class="box">{{ flyingHand.userName || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>飞手性别</span>
            <span class="contant"
              ><div class="box">{{ flyingHand.sex || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>飞手联系方式</span>
            <span class="contant"
              ><div class="box">{{ flyingHand.phoneNumber || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>证件号码</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flyingHand.credentialsNumber"
              placement="top"
            >
              <span class="contant"
                ><div class="box">
                  {{ flyingHand.credentialsNumber || "-" }}
                </div></span
              >
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>居住地址</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flyingHand.residentialAddress"
              placement="top"
            >
              <span class="contant"
                ><div class="box">
                  {{ flyingHand.residentialAddress || "-" }}
                </div></span
              >
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行执照</span>
            <span v-if="!flyingHand.pilotLicense" class="contant">{{
              "-"
            }}</span>
            <img v-else :src="flyingHand.pilotLicense" alt="" />
          </div>
          <div v-if="flyingHandList.length > 1" class="divider"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="飞行计划" name="fourth">
        <div class="noAvailable" v-if="!flyApplyId">暂无数据</div>
        <div v-else>
          <div class="content-line">
            <span>飞行计划编号</span>
            <span class="contant"
              ><div class="box">{{ flightPlan.flyApplyCode }}</div></span
            >
          </div>
          <div class="content-line">
            <span>申请人</span>
            <span class="contant"
              ><div class="box">{{ flightPlan.applicant }}</div></span
            >
          </div>
          <div class="content-line">
            <span>飞行计划范围</span>
            <span class="contant">
              <el-checkbox v-model="showAirspace"></el-checkbox
              >显示飞行范围/航线</span
            >
          </div>
          <div class="content-line">
            <span>起飞点</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.takeOffPointAddress"
              placement="top"
            >
              <span class="contant">
                <div class="box">
                  {{ flightPlan.takeOffPointAddress || "-" }}
                </div></span
              >
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>降落点</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.landingPointAddress"
              placement="top"
            >
              <span class="contant">
                <div class="box">
                  {{ flightPlan.landingPointAddress || "-" }}
                </div></span
              >
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行计划底高</span>
            <span class="contant"
              ><div class="box">
                {{ flightPlan.lowHeight ? `${flightPlan.lowHeight} 米` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>飞行计划顶高</span>
            <span class="contant"
              ><div class="box">
                {{ flightPlan.topHeight ? `${flightPlan.topHeight} 米` : "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>飞行时间段</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="`${flightPlan.startTime}~${flightPlan.endTime}`"
              placement="top"
            >
              <span class="contant"
                ><div class="box">
                  {{
                    flightPlan.startTime
                      ? `${flightPlan.startTime}~${flightPlan.endTime}`
                      : "-"
                  }}
                </div></span
              >
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行任务性质</span>
            <span class="contant"
              ><div class="box">{{ flightPlan.taskName || "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>飞行模式</span>
            <span class="contant" v-if="flightPlan.flightMode === 0"
              >视距内</span
            >
            <span class="contant" v-else-if="flightPlan.flightMode === 1"
              >视距外</span
            >
            <span class="contant" v-else>{{ "-" }}</span>
          </div>
          <div class="content-line">
            <span>操作模式</span>
            <span class="contant" v-if="flightPlan.operatorMode === 0"
              >遥控飞行</span
            >
            <span class="contant" v-else-if="flightPlan.operatorMode === 1"
              >自主飞行</span
            >
            <span class="contant" v-else>{{ "-" }}</span>
          </div>
          <div class="content-line">
            <span>任务审批文件</span>
            <span class="contant">
              <span v-if="!flightPlan.files">{{ "-" }}</span>
              <el-tooltip
                v-else
                v-for="file in flightPlan.files"
                :key="file.fileId"
                class="box-item"
                effect="dark"
                :content="`${file.fileName}.${file.fileExtension}`"
                placement="top"
              >
                <span>
                  <div class="box">
                    {{ `${file.fileName}.${file.fileExtension}` }}
                  </div></span
                >
              </el-tooltip>
            </span>
          </div>
          <div class="content-line">
            <span>应急处置预案</span>
            <span class="contant">
              <div class="box">
                <div class="box">{{ flightPlan.emergencyPlan || "-" }}</div>
              </div></span
            >
          </div>
          <div class="content-line">
            <span>备注说明</span>
            <span class="contant"
              ><div class="box">{{ flightPlan.remark || "-" }}</div></span
            >
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { onMounted, reactive, watch, defineEmits, computed, inject } from "vue";
import useFlightTaskStore from "@/store/modules/flightTask";
import useMqttStore from "@/store/modules/mqttInfo";
import { getFlyapplyDetailApi } from "@/api/flightTask/flyApply";
import { getFlyActionListApi } from "@/api/flightTask/flyAction";
import { getPersonDetail } from "@/api/dataManagement/dataUser";
import { getCurAirroute } from "@/api/cockpit/airroute";
import { getInstitution } from "@/api/dataManagement/institutional";
import { historyTrack } from "@/api/history/index";
import { getDetailByDeviceSn } from "@/api/dataManagement/device";
import { gcj02towgs84 } from "@/utils/coordinateTrans.js";
import { dataFormat } from "@/utils/format";
import { airlineFormat } from "@/utils/airlineFromat";

defineExpose({
  tabsVisibleClose,
});

let flyTaskStore = useFlightTaskStore();
let mqttStore = useMqttStore();

// 飞手列表
let flyingHandList = ref([]);
// 飞行器列表
let droneModelList = ref([]);
// 飞行计划信息
let flightPlan = ref({});
// 飞行实施详情
let flightAction = ref({});
// 机构详情
let firmDetail = ref({});
// 是否显示申请的飞行范围
const showAirspace = ref(false);
// 是否报警，更改航线颜色
const isAlarm = ref(false);

const changeIsShowDetail = inject("changeIsShowDetail");
const isShowDetail = inject("isShowDetail");
const VITE_BASE_PUBLICPATH = import.meta.env.VITE_BASE_PUBLICPATH;
const emits = defineEmits([
  "drawLine",
  "removeLine",
  "drawAirspace",
  "removeAirspace",
  "showWaringTabs",
]);
const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

// 弹窗当前显示tab
const activeName = computed(() => {
  return flyTaskStore.activeName;
});

// 弹窗是否显示
const visible = computed(() => {
  return flyTaskStore.TabsVisible;
});

// 飞行计划Id
const flyApplyId = computed(() => {
  if (droneModelList.value[0]) {
    if (droneModelList.value[0].flyApplyId)
      return droneModelList.value[0].flyApplyId;
  }
  return flyTaskStore.flyApplyId;
});

// 飞手Id
const flyingId = computed(() => {
  return flightPlan.value.flyingId || flyTaskStore.flyingId;
});

// 无人机、飞机ID
const aircraftId = computed(() => {
  return flyTaskStore.aircraftId;
});

// 飞行批次号

const droneUK = computed(() => {
  return flightAction.value ? flightAction.value.droneUK : flyTaskStore.droneUK;
});

// 是否是飞机
const isPlane = computed(() => {
  // console.log(droneModelList.value[0]);
  if (droneModelList.value[0]) {
    return droneModelList.value[0].deviceTypeId === "4";
  }
  return false;
});

// 是否是机构申请
const isFirm = computed(() => {
  return flightPlan.value.applyType === 1;
});

const actionLine = ref([]);


/* 视屏流点击触发事件 */
function deviceVideo(value) {
  // emits("videoPlay", "http://123.156.230.226:9080/测试/2024031411.live.flv");
  emits("videoPlay", "http://123.156.230.226:9080/rtp/41010500002000000002_41010500002000000005.live.flv");
}

/**
 * @关闭弹窗
 * */
function tabsVisibleClose() {
  // debugger;
  flyTaskStore.closeTabs();
  emits("removeLine");
  emits("removeAirspace");
  if (window.tabsType === true) {
    emits("showWaringTabs");
  }
  flyingHandList.value = [];
  droneModelList.value = [];
  flightPlan.value = {};
  flightAction.value = {};
  firmDetail.value = {};
  changeIsShowDetail();
  showAirspace.value = false;
  // flyTaskStore.closeTabs();
}

/**
 * @获取飞行计划详情
 * */
const getFlyPlanDetail = async () => {
  const { data } = await getFlyapplyDetailApi(flyApplyId.value);
  flightPlan.value = {
    ...data.airspaceApply,
    ...data.flyApply,
    files: data.tlowairServiceFiles,
  };
  // console.log("获取飞行计划详情", flightPlan.value);
};

/**
 * @获取飞行实施详情
 * */
const getFlyAction = async () => {
  const { rows } = await getFlyActionListApi(
    {},
    { flyApplyId: flyApplyId.value }
  );
  if (rows.length > 0) {
    flightAction.value = rows[0];
  }
  if (rows[0].droneUK) {
    const code = await getCurAirline(rows[0].droneUK);
    if (code === 501) await getHisAirline(rows[0].droneUK);
  }
};

/**
 * @获取在飞无人机轨迹
 * */
const getCurAirline = async (val) => {
  let droneUK = val || droneUK.value;
  const { data } = await getCurAirroute({ droneUK });
  if (data.code === 501) {
    return data.code;
  } else {
    let positions = data.coors.map((item) => {
      return [item.longitude * 1, item.latitude * 1, item.height * 1];
    });
    actionLine.value = [positions[0], ...positions];
    droneModelList.value[0] = {
      ...(droneModelList.value[0] || {}),
      ...data,
      droneUK,
    };
  }
};

/**
 * @获取历史无人机轨迹
 * */
const getHisAirline = async (val) => {
  let droneUK = val || droneUK.value;
  const { data } = await historyTrack({ droneUKs: [droneUK] });
  // console.log("获取历史无人机轨迹", data);
  droneModelList.value[0] = {
    ...(droneModelList.value[0] || {}),
    ...data[0],
    droneUK,
  };
  let positions = data[0].coors.map((item) => {
    return [item.longitude * 1, item.latitude * 1, item.height * 1];
  });
  actionLine.value = [positions[0], ...positions];
};

/**
 * @获取飞手详情
 * */
const getFlyingHindDetail = async () => {
  let flyingIds = flyingId.value.split(",");
  flyingHandList.value = [];

  flyingIds.forEach(async (item) => {
    const { data } = await getPersonDetail(item);
    flyingHandList.value.push(data);
  });
};

/**
 * @获取机构详情
 * */
const getFirmDetail = async () => {
  const { data } = await getInstitution(flightPlan.value.applicantId);
  console.log("getFirmDetail", data);
  firmDetail.value = data;
};

/**
 * @获取无人机或飞机详情
 * */
const getAircraftDetail = async () => {
  let aircraftIds = aircraftId.value.split(",");
  droneModelList.value = [];
  aircraftIds.forEach(async (item) => {
    const { data } = await getDetailByDeviceSn(item);
    const data1 = mqttStore.aircraftDetail(item);
    // console.log("获取无人机或飞机详情", data);
    console.log(data1);
    isAlarm.value =
      data1.intrusionStatus === 1 ||
      data1.invasionStatus === 1 ||
      data1.collisionStatus === 1;
    droneModelList.value.push({ ...data, ...data1 });
  });
};

/**
 * @通过获取无人机或飞机详情
 * */
const getDetailByDroneUK = (val) => {
  let UK = val || droneUK.value;
  const data = mqttStore.getDetailByDroneUk(UK);
  // console.log(data);
  droneModelList.value[0] = { ...(droneModelList.value[0] || {}), ...data };
  // console.log(droneModelList.value[0]);
};

/**
 * @处理无人机轨迹数据
 * */
const trackDataHandle = () => {
  // 历史轨迹
  let trackLine = actionLine.value;
  // 拼接上当前点的经纬度高度
  let position = [
    ...trackLine,
    [
      droneModelList.value[0].curLongitude * 1,
      droneModelList.value[0].curLatitude * 1,
      droneModelList.value[0].curHeight * 1,
    ],
  ];
  // 飞手图标
  let driverIcon = null;
  // 无人机图标
  let droneIcon = null;
  // 飞手坐标
  let dirverPosition = null;
  // 飞手到航线起点连线
  let flyHandToAircraft = null;
  let color = null;
  let { landFlag, intrusionStatus, reportStatus, type, partnerId } =
    droneModelList.value[0];
  console.log(">>>>>>>>>>>>>>>>>>>>>>>", droneModelList.value[0]);
  if (intrusionStatus === 1) {
    if (droneModelList.value[0].driverLongitude) driverIcon = "flyHandH.png";
    if (type === 4) {
      if (partnerId === 1) {
        droneIcon = "hangyeUAV2.png"
      }else if (partnerId === 8) {
        droneIcon = "jnks.png"
      }else{
        // 其他通用行业无人机
        droneIcon = "HANGYE.png"
      }
    }else {
      droneIcon = "UAVBlackFly.png";
    }
  } else if (intrusionStatus === 0 && type === 4) {
    if (droneModelList.value[0].driverLongitude) driverIcon = "flyHandHY.png";

    if (partnerId === 1) {
      droneIcon = "hangyeUAV2.png"
    }else if (partnerId === 8) {
      droneIcon = "jnks.png"
    }else{
      // 其他通用行业无人机
      droneIcon = "HANGYE.png"
    }
  } else if (intrusionStatus === 0 && reportStatus === 0) {
    if (droneModelList.value[0].driverLongitude) driverIcon = "flyHandSF.png";
    droneIcon = "UAVShiFeiFly.png";
  } else if (intrusionStatus === 0 && reportStatus === 1) {
    if (droneModelList.value[0].driverLongitude) driverIcon = "flyHandN.png";
    droneIcon = "UAVNormalFly.png";
  }
  if (droneModelList.value[0].driverLongitude) {
    // 飞手坐标
    dirverPosition = [
      droneModelList.value[0].driverLongitude * 1,
      droneModelList.value[0].driverLatitude * 1,
      0,
    ];
    // 飞手到航线起点
    flyHandToAircraft = [dirverPosition, position[0]];
  }
  // console.log("实飞轨迹坐标", position);
  let data = {
    ...droneModelList.value[0],
    airspaceApplyId: Math.random() + "1",
    id: Math.random() + "222",
    position,
    driverIcon,
    droneIcon,
    dirverPosition,
    flyHandToAircraft,
    trackLine,
    color: "#f00",
    zoom: 16,
    isTrack: true,
    flyHandLineColor: "#f3f3f3",
    EntityType: "track",
  };
  return data;
};

/**
 * @监听飞行计划ID获取飞行计划详情
 * */
watch(flyApplyId, (newV, oldV) => {
  if (newV) {
    getFlyPlanDetail();
    getFlyAction();
  }
});

/**
 * @监听飞手ID获取飞手详情
 * */
watch(flyingId, (newV, oldV) => {
  if (newV) {
    getFlyingHindDetail();
  }
});

/**
 * @监听飞行器ID获取飞行器详情
 * */
watch(
  aircraftId,
  (newV, oldV) => {
    if (newV) {
      getAircraftDetail();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

/**
 * @监听droneUK获取mqtt推送的无人机实时位置信息1
 * */
watch(
  () => flyTaskStore.$state.droneUK,
  async (newV, oldV) => {
    // 是否传入droneUK值
    if (newV) {
      // 获取飞行器详情
      getDetailByDroneUK(newV);
      // 如果没有飞行计划ID，则为黑飞，打开弹窗同时显示飞行轨迹
      if (!flyApplyId.value) {
        // 获取轨迹详情
        const code = await getCurAirline(newV);
        if (code === 501) await getHisAirline(newV);

        let data = trackDataHandle();
        emits("drawLine", [data]);
      }
    }
  },
  { immediate: true, deep: true }
);

/**
 * @飞行计划是否是机构申请的
 * */
watch(
  isFirm,
  (newV) => {
    if (newV) {
      getFirmDetail();
    }
  },
  { immediate: true }
);

/**
 * @是否显示申请的空域或航线
 * */
watch(showAirspace, async (newV, oldV) => {
  // 判断是否显示申请的空域或航线
  if (newV) {
    // 如果有飞行计划

    if (flyApplyId.value) {
      // 申请的类型为空域
      console.log("flightPlan.value.flightArea", flightPlan.value.flightArea);
      if (flightPlan.value.flightArea === 0) {
        // 空域信息（中心点、底高、顶高、半径、ID、填充颜色）
        let centerPoint = [
          flightPlan.value.flightLongitude,
          flightPlan.value.flightLatitude,
        ];
        let item = {
          pointLocation: `${flightPlan.value.flightLongitude},${flightPlan.value.flightLatitude}`,
          lowHeight: flightPlan.value.lowHeight,
          topHeight: flightPlan.value.topHeight,
          radius: flightPlan.value.flightRadius,
          centerPoint,
          zoom: 13,
          airTypeId: flightPlan.value.airspaceApplyId,
          fullColor: "#800080",
          lineColor: "#800080",
          EntityType: "applyAirspace",
        };
        // 根据 droneUK 判断是否有飞行记录，有则获取飞行轨迹，没有则只在地图上显示空域
        if (droneModelList.value[0].droneUK) {
          let data2 = trackDataHandle();
          emits("drawLine", [data2]), emits("drawAirspace", item);
        } else emits("drawAirspace", item);
      } else {
        // 申请的类型为航线
        // let arr1 = flightPlan.value.airlinePoints.split(",");
        // let arr2 = arr1.map((item) => {
        //   return item.split("@");
        // });
        // let position = arr2.map((item) => {
        //   let lon = item[0] * 1;
        //   let lat = item[1] * 1;
        //   return [lon, lat, item[2] * 1];
        // });
        // let len = position.length;
        // let centerPoint = len % 2 ? position[(len - 1) / 2] : position[len / 2];

        // let standbyPosition = null;
        // let standbyPoint = null;
        // if (flightPlan.value.alternateLandingPointLatitude) {
        //   if (item.alternateLandingPointConnection) {
        //     let point = item.alternateLandingPointConnection.split(",");
        //     standbyPosition = [
        //       [
        //         item.alternateLandingPointLongitude * 1,
        //         item.alternateLandingPointLatitude * 1,
        //         0,
        //       ],
        //       [point[0] * 1, point[1] * 1, point[2] * 1],
        //     ];
        //   } else {
        //     standbyPosition = [
        //       [
        //         item.alternateLandingPointLongitude * 1,
        //         item.alternateLandingPointLatitude * 1,
        //         0,
        //       ],
        //       position[len - 2],
        //     ];
        //   }

        //   standbyPoint = [
        //     item.alternateLandingPointLongitude * 1,
        //     item.alternateLandingPointLatitude * 1,
        //     0,
        //   ];
        // }
        let data1 = airlineFormat(flightPlan.value, "airline");
        // {
        //   EntityType: "applyline",
        //   speed: 3000,
        //   position,
        //   centerPoint,
        //   zoom: 13,
        //   color: flightPlan.value.aircraftType === 4 ? "#00ffd2" : "#fcff00",
        //   takeoffPoint: position[0],
        //   iconS: "/img/cockpit/startPoint.png",
        //   landingPoint: position[len - 1],
        //   iconE: "/img/cockpit/endPoint.png",
        //   standbyPosition,
        //   standbyPoint,
        //   iconB: "/img/cockpit/standbyPoint.png",
        // };
        if (droneModelList.value[0].droneUK) {
          let data2 = trackDataHandle();
          emits("drawLine", [data1, data2]);
        } else emits("drawLine", [data1]);
      }
    }
    // else {
    //   if (droneUK.value) {
    //     const code = await getCurAirline();
    //     let data2 = {
    //       airspaceApplyId: "black" + Math.random(),
    //       position: actionLine.value,
    //       color: "#f00",
    //       EntityType: "track",
    //     };
    //     emits("drawLine", [data2]);
    //   }
    // }
  } else {
    if (flightPlan.value.flightArea === 0) {
      emits("removeLine");
      emits("removeAirspace");
    } else {
      emits("removeLine");
    }
  }
});
</script>

<style lang="scss" scoped>
.single-tabs-container {
  position: absolute;
  z-index: 100;
  width: 428px;
  padding: 15px 20px 19px;
  /* height: 530px; */
  top: 200px;
  left: 200px;
  border-radius: 4px;
  //background-color: rgba(9, 27, 35, 0.8);
  background-color: rgba(9, 27, 35, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* overflow: hidden; */
  //border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;

  .close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  :deep .el-tabs__item {
    color: #ffffff;
    font-size: 14px;
  }

  :deep .el-tabs__item:hover {
    color: #00fcff;
  }

  :deep .el-tabs__item.is-active {
    color: #00fcff;
  }

  /* 去掉tabs标签栏下的下划线 */
  :deep .el-tabs__nav-wrap::after {
    position: static !important;
    /* background-color: #fff; */
  }

  /* 下划线切换高亮 */
  :deep .el-tabs__active-bar {
    background-color: #00fcff;
  }
}

.tabs-contanier {
  //border: 1px red solid;
  position: absolute;
  z-index: 100;
  width: 428px;
  /* height: 530px; */
  //top: 200px;
  //left: 200px;
  padding: 15px 30px 19px;
  border-radius: 4px;
  //background-color: rgba(9, 27, 35, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* overflow: hidden; */
  animation: rotate 3s linear infinite;

  :deep .el-tabs__item {
    color: #ffffff;
    font-size: 20px;
  }

  :deep .el-tabs__item:hover {
    color: #00fcff;
  }

  :deep .el-tabs__item.is-active {
    color: #00fcff;
  }

  /* 去掉tabs标签栏下的下划线 */
  :deep .el-tabs__nav-wrap::after {
    position: static !important;
    /* background-color: #fff; */
  }

  /* 下划线切换高亮 */
  :deep .el-tabs__active-bar {
    background-color: #00fcff;
  }
}

.noAvailable {
  font-size: 16px;
  color: #909399;
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes rotate {
  0% {
    //border: 1px solid #44aeff;
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
  50% {
    border: 2px rgba(68, 174, 255, 0.4) solid;
  }
  100% {
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
}

.single-demo-tabs > :deep .el-tabs__content {
  color: #e6e6e6;
  font-size: 12px;
  height: 350px;
  padding-right: 15px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */

  .content-line {
    padding: 10px 0;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contant {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // display: block;
      text-align: right;
      width: 247px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */

      .el-checkbox {
        margin-right: 5px;
        height: 100%;
      }

      .box {
        width: 247px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }

    .boxVideo{
      width: 14px;
      height: 14px;
      cursor: pointer;
      background: url("/img/video.png") no-repeat;
    }

    img {
      width: 130px;
      height: 70px;
    }
  }

  .divider {
    border: 1px solid #ffffff;
  }

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

.demo-tabs > :deep .el-tabs__content {
  color: #e6e6e6;
  font-size: 16px;
  height: 350px;
  padding-right: 15px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */

  .content-line {
    padding: 7px 0;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contant {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      width: 247px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */

      .el-checkbox {
        margin-right: 5px;
        height: 100%;
      }

      .box {
        width: 100%;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }

      .boxVideo{
        width: 14px;
        height: 14px;
        cursor: pointer;
        background: url("/img/video.png") no-repeat;
      }
    }
  }

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

.goBack {
  width: 107px;
  height: 33px;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  font-family: PingFang SC;
  background-color: rgba(0, 168, 255, 0.6);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  //border: 1px solid;
  //border-image: linear-gradient(160deg, white 0%, rgba(9, 27, 35, 0.8) 100%) 0.5;
  border-radius: 0px 5px 0px 5px;
  animation: rotate 2s linear infinite;
  cursor: pointer;
}

@keyframes rotate {
  0% {
    //border: 1px solid #44aeff;
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
  50% {
    border: 2px rgba(68, 174, 255, 0.4) solid;
  }
  100% {
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
}
</style>

<style lang="scss">
#tabCard {
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    width: 90%;
  }
  .el-tabs .el-tabs__header .el-tabs__nav-wrap {
    .el-tabs__nav {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      float: none !important;
    }
  }

  .el-checkbox .el-checkbox__input {
    .el-checkbox__inner,
    .el-checkbox__original {
      background: transparent;
      border: 1px solid #00fcff;
    }
  }
}
</style>
